<template>
  <div class="fm-widget-form-container">
    <div v-if="data.list.length === 0" class="fm-widget-form-empty">
      {{$t('m.eform.formDesign.label.dragModel')}}
    </div>

    <a-form class="widget-form-content">
      <draggable
        v-model="data.list"
        v-bind="{ group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
        @add="handleWidgetAdd"
      >
        <grid-layout
          :layout="data.list"
          :col-num="24"
          :row-height="10"
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[0, 0]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="(item, index) in data.list"
            :minH="10"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.key"
          >
            <transition-group v-if="item && item.key" name="fade" tag="div" class="fm-widget-form-list">
              <layout-form-item
                :key="item.key"
                :element="item"
                :selectWidget="selectWidget"
                @select="selectModel"
                :index="index"
                :data="data"
                @handleWidgetOpensSet="handleWidgetOpensSet"
                @handleEdit="handleEdit"
              />
            </transition-group>
            <div v-else style="width: 100%; height: 100%; background-color: #85e3fd">
              {{ item.i }}
            </div>
          </grid-item>
        </grid-layout>
      </draggable>
    </a-form>
  </div>
</template>

<script>

import Draggable from 'vuedraggable';
import VueGridLayout from 'vue-grid-layout';
import LayoutFormItem from './LayoutFormItem';

export default {
  components: {
    Draggable,
    LayoutFormItem,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  props: {
    data: Object,
    selectWidget: Object
  },
  data() {
    return {};
  },
  mounted() {
    document.body.ondrop = function (event) {
      let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
      if (isFirefox) {
        event.preventDefault();
        event.stopPropagation();
      }
    };
  },
  methods: {
    handleSelectWidget(index) {
      this.selectModel(this.data.list[index])
    },
    handleWidgetAdd(evt) {
      let newIndex = evt.newIndex;
      if (this.data.list.length === 1) {
        newIndex = 0;
      }
      const listString = JSON.stringify(this.data.list);
      this.data.list = JSON.parse(listString);
      let selectWidget = {}
      if (newIndex === 1) {
        if (this.data.list.length > 2) {
          const lastItem = this.data.list.splice(1, 1);
          this.data.list.push(lastItem[0])
          let maxY = 0;
          this.data.list.forEach((item, index) => {
            if (index === this.data.list.length - 1) {
              return
            }
            if ((item.y + item.h) > maxY) {
              maxY = item.y + item.h
            }
          })
          this.data.list[this.data.list.length - 1]['y'] = maxY;
        }
        selectWidget = this.data.list[this.data.list.length - 1]
      } else {
        if (this.data.list.length > 1) {
          const height = this.data.list[0].h
          this.data.list.forEach((item, index) => {
            if (index === 0) {
              return
            }
            item.y = item.y + height
          })
        }
        selectWidget = this.data.list[0]
      }

      this.selectModel(selectWidget)
    },
    handleWidgetDelete(index) {
      let selectWidget = {}
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          selectWidget = {};
        } else {
          selectWidget = this.data.list[index - 1];
        }
      } else {
        selectWidget = this.data.list[index + 1];
      }
      this.selectModel(selectWidget)

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleWidgetOpensSet() {
      this.$emit('handleWidgetOpensSet');
    },
    handleEdit() {
      this.$emit('handleEdit');
    },
    selectModel(value) {
      this.$emit("select", value)
    }
  }
};
</script>

<style lang="less" scoped>
.widget-form-content {
  margin: 10px 10px 10px 10px;
  border: 2px dashed;
  border-color: #999;
  border-radius: 0;
  padding: 5px;
}

/deep/ .vue-grid-layout {
  min-height: 400px;

  .vue-grid-item {
    padding: 7px;

    .fm-widget-col-list {
      height: 100%;
    }

    .vue-resizable-handle {
      display: inline-block;
      background: none;
      z-index: 9;
    }

    .vue-resizable-handle:after {
      content: '';
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid #a7a8aa;
      bottom: 10px;
      right: 10px;
      border-top-color: transparent;
      border-left-color: transparent;
    }
  }
}
</style>
